<template>
  <div>
    <h2>Counter: {{ counter }}</h2>
    <!-- <input type="text" @change="changeCounter($event.target.value)"/> -->
    <button @click="changeCounter(88)">修改counter</button>

    <!-- modelCountValue绑定 -->
    <hr>
    <h2>modelCountValue: {{ modelCountValue }}</h2>
    <button @click="changemodelCountValue">修改modelCountValue的值</button>
  </div>
</template>

<script setup>

  defineProps({
    counter: {
      type: Number,
      default: 0
    },
    modelCountValue: {
      type: String,
      default: ""
    }
  })

  const emit = defineEmits(["update:counter", "update:modelCountValue"])

  const changeCounter = (value) => {
    emit("update:counter", value)
  }

  const changemodelCountValue = () => {
    emit("update:modelCountValue", "hello v-model")
  }

</script>

<style scoped>
</style>

